<template>
    <div class="monitor-con">
        <headNav title="校园监控" :backBySelf='true' @back='back'></headNav>
       
        <!-- {{placeList}} -->
        <div v-show="placeList.length == 0" class="neck-p">请选择监控位置</div>
        <div v-show="placeList.length > 0" class="neck-p">
            <div v-for="(item,index) in placeList" :key="index" 
            @click="clickPlace(item)"
            class="place-item"> {{item.name}} / </div>
        </div>
        <div class="list-p">
            <div @click="toDetail(item)" 
            v-for="(item, index) in buildList" :key="index" class="list-item">{{item.name}}</div>
            
            <div v-show="buildList.length == 0" class="no-data">无建筑物</div>
        </div>

        <div @click.stop="open" v-show="deviceList.length > 0" class="device-circle">设备{{deviceList.length}}个</div>

        <div class="device-p" v-show="isShowDevice">
            
            <div class="device-list">
                <img  @click.stop="close" class="close-btn" src="@/assets/img/wj.png" alt="">
                <div class="sdref">
                    <div class="vic-title">设备列表</div>
                    <div v-for="(item, index) in deviceList" :key="index" 
                     @click="lookDevice(item)" class="device-item">{{item.name}}</div>
                    
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
import {getBuildList, getFirstBuildList} from '@/api/monitorApi'
export default {
    name: 'monitorIndex',
    components: {
        headNav
    },
    computed: {
        schoolId () {
            return this.$store.state.user.schoolId
        },
        schoolName () {
            return this.$store.state.user.schoolName
        }
    },
    data () {
        return {
            isShowDevice: false,
            placeList: [],
            buildList: [],
            deviceList: []
        }
    },
    methods: {
        back () {
            if (this.placeList.length == 1) {
                 this.$router.go(-1)
            } else {
                 this.clickPlace(this.placeList[this.placeList.length - 2])
            }
        },
        open () {
            this.isShowDevice = true
        },
        close () {
            this.isShowDevice = false
        },
        async getFirstBuildList () {
            var res = await getFirstBuildList({
                schoolId: this.schoolId
            })
            
            this.buildList = this.sort(res.data)
            this.deviceList = []
        },
         toDetail (item) {
            this.placeList.push(item)
            this.getBuildList(item)
        },
        async getBuildList (item) {
            var res = await getBuildList({
                detailId: item.detailId,
                schoolId: this.schoolId
            })
            res = res.data
            if (res.buildingInfoMonitorsList) {
                this.buildList = this.sort(res.buildingInfoMonitorsList)
            } else {
                this.buildList = []
            }
            if (res.monitorList) {
                this.deviceList = this.sort(res.monitorList)
            } else {
                this.deviceList = []
            }
        },
        clickPlace (item) {
            var index = 0
            for (var i = 0; i<this.placeList.length; i++) {
                if (item.detailId == this.placeList[i].detailId) {
                    index = i
                }
            }
            
            this.placeList = this.placeList.slice(0, index + 1)
            if (item.detailId == 0) {
                this.getFirstBuildList()
            }else {
                this.getBuildList(item)
            }
            
        },
        lookDevice (item) {
            console.log(item)
           
            this.$store.commit('monitor/setDevice', item)
            this.$router.push('look')
            // this.$router.push('lookTC')
        },
        sort (arr) {
            let sortArray = arr.sort(function (obj1, obj2) {
                return obj1.name.localeCompare(obj2.name);
                // return obj1.name.charCodeAt(0)-obj2.name.charCodeAt(0)
            })

            var letterArr = []
            for (var i = sortArray.length - 1; i >=0; i--) {
                var item = sortArray[i]
                var char = item.name.charAt(0)
                 
                if (/^[a-zA-Z]{1}$/.test(char)) {
                   
                    letterArr.push(item)
                    sortArray.splice(i, 1)
                }
            }

           letterArr = letterArr.sort(function (obj1, obj2) {
               
                return obj1.name.charCodeAt(0)-obj2.name.charCodeAt(0)
            })

            return letterArr.concat(sortArray)
        }
    },
    mounted () {
        this.placeList.push({name: this.schoolName, detailId: 0})
        this.getFirstBuildList(0)
    }
}
</script>
<style scoped>
.monitor-con{
    background: #fff;
}
.neck-p{
    color: #666666;font-size: 0.28rem;padding: 0.32rem 0.24rem; background: #F5F5F5;
}

.list-p{
    height: calc(100% - 1.95rem); box-sizing: border-box; overflow: scroll;
}
.list-item{
    font-size: 0.28rem; color: #666; height: 0.88rem; line-height: 0.88rem;
    padding: 0 0 0 0.24rem; border-bottom: 1px solid #f9f4f4;
}
.no-data{
     font-size: 0.28rem; color: #666; height: 0.88rem; line-height: 0.88rem;
    padding: 0 0 0 0.24rem; text-align: center;
}
.device-circle{
    position: absolute; right: 0.1rem; top: 3rem; width: 1.2rem; height: 1.2rem;line-height: 1.2rem; border-radius: 50%;
    background: #128FEF; color: #fff; text-align: center; box-shadow: 0 0 0.1rem 0 rgba(0,0,0,0.5);
}
.device-p{
    position: fixed; z-index: 110; left: 0; right: 0; top:0; bottom: 0; background: rgba(0,0,0,0.3);
    display: flex;  justify-content: center; align-items: center;
} 
.device-list{
    width: 90%; height: 80%; background: #fff; position: relative; 
}
.device-item{
    color: #128FEF; font-size: 0.28rem; padding: 0.3rem 0.5rem; border-bottom: 1px solid #efefef;
}
.close-btn{
    position: absolute; top: -0.2rem; right: -0.2rem; width: 0.6rem; height: 0.6rem; transform: rotate(45deg);
    background: #fff; border-radius: 50%;
}
.sdref{
    width: 100%; height: 100%;overflow: scroll;
}
.place-item{
    display: inline-block; vertical-align: middle;
}
.vic-title{
   font-size: 0.3rem; padding: 0.3rem 0.5rem; border-bottom: 1px solid #efefef;
   text-align: center;
}
</style>